<template>
  <view>
    <u-sticky>
      <u-subsection
        :list="list"
        :current="current"
        @change="changeOrderKind"
        bg-color="#adb838"
        active-color="#97AF13"
      >
      </u-subsection>
    </u-sticky>
    <view class="order" v-if="isLogin == true && orderList.length > 0">
      <view
        class="order-card"
        v-for="item in orderList"
        :key="item.orderInfoId"
      >
        <!-- 头部 -->
        <view class="order-info-header">
          <view class="order-info-title">
            <view>{{ item.trueAddress }}</view>
            <view>订单编号：{{ item.boxOrderNum }}</view>
          </view>
          <view>
            <image
              v-if="item.boxStatus == 'TRADE_SUCCESS'"
              :src="require('@/static/orderDetail/peisong.png')"
              style="height: 40px; width: 40px; margin-right: 5px"
            />
            <image
              v-else-if="item.boxStatus == 'DELIVERY_FINISH'"
              :src="require('@/static/orderDetail/finish_red.png')"
              style="height: 40px; width: 40px; margin-right: 5px"
            />
            <image
              v-else-if="item.boxStatus == 'DELIVERYING'"
              :src="require('@/static/orderDetail/peisonging.png')"
              style="height: 40px; width: 40px; margin-right: 5px"
            />
            <image
              v-else
              :src="require('@/static/orderDetail/noPay.png')"
              style="height: 40px; width: 40px; margin-right: 5px"
            />
          </view>
        </view>
        <!-- 内容 -->
        <view class="order-info-content">
          <view>{{ item.kuaidiInfo }}</view>
          <view>
            <view class="time">{{ item.boxPayTime }}</view>
            <view class="price">
              <view>共1个包裹，实付</view>
              <view>￥{{ item.price }}</view>
            </view>
          </view>
          <u-button :custom-style="customStyle" @click="toOrderDetail(item)"
            >查看订单</u-button
          >
        </view>
      </view>
    </view>
    <view
      v-else-if="isLogin == true && orderList.length == 0"
      class="no-login"
      @click="toLogin"
    >
      <u-empty text="暂无订单" mode="order"></u-empty>
    </view>

    <!-- 未登陆 -->
    <view v-else class="no-login" @click="toLogin">暂未登陆，请先登录...</view>
  </view>
</template>

<script>
//快递类型
const PriceMap = new Map();
// 快递站点
const KuaidiMap = new Map();
// 快递价格
const PMap = new Map();

import { jugeIsLogin, formatData } from "@/common/js/utils";
export default {
  data() {
    return {
      isLogin: false,
      customStyle: {
        marginTop: "20px", // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: "rgb(180 190 72)",
      },
      allPriceList: [], //所有价格list
      allKuaidiList: [], //所有快递站list
      orderList: [],
      list: [
        {
          name: "待配送",
        },
        {
          name: "配送中",
        },
        {
          name: "已完成",
        },
      ],
      current: 0,
      status: ["TRADE_SUCCESS", "DELIVERYING", "DELIVERY_FINISH"],
    };
  },
  onLoad(params) {

  },
  onShow() {
    // uni.startPullDownRefresh();
    jugeIsLogin()
      .then(() => {
        this.isLogin = true;
        console.log(this.isLogin);
      })
      .catch(() => {
        this.isLogin = false;
      });

    this.getAllPriceList()
      .then(() => {
        return this.getAllKuaidiList();
      })
      .then(() => {
        this.getAllOrderList();
      });
    this.$u.api.getLinkageInfoApi().then((res) => {
      // 数据格式化处理
      var formatD = formatData(res.data);
      this.$u.vuex("vuex_AddressData", formatD);
    });
  },
  onPullDownRefresh() {
    console.log("refresh");
    setTimeout(() => {
      this.getAllOrderList();
      uni.stopPullDownRefresh();
    }, 1000);
  },
  // onShow() {
  //   this.getAllOrderList();

  // },
  methods: {
    // 获取所有的站点价格
    getAllPriceList() {
      return new Promise((resolve) => {
        this.$u.api.getAllPriceApi({ schoolId: 0 }).then((res) => {
          this.allPriceList = res.priceList;
          res.priceList.map((v) => {
            PriceMap.set(v.boxPriceId, v.boxPriceName);
            PMap.set(v.boxPriceId, v.boxPrice);
          });
          resolve();
        });
      });
    },
    getAllKuaidiList() {
      return new Promise((resolve) => {
        this.$u.api.getKuaidiBySchoolApi({ schoolId: 0 }).then((res) => {
          this.allKuaidiList = res.kuaidiList;
          res.kuaidiList.map((v) => {
            KuaidiMap.set(v.kuaidiId, v.luaidiName);
          });
          resolve();
        });
      });
    },
    //获取所有订单
    getAllOrderList() {
      this.$u.api
        .getAllOrderListApi({ boxStatus: this.status[this.current] })
        .then((res) => {
          res.userOrderList.map((v) => {
            v.orderAddress = v.address.split("/");
            v.trueAddress =
              v.orderAddress[0] +
              "/" +
              v.orderAddress[1] +
              "/" +
              v.orderAddress[2] +
              "/" +
              v.orderAddress[3];
            v.kuaidiInfo = KuaidiMap.get(v.kuaidiId) + "* 1";
            v.price = PMap.get(v.boxPriceId);
          });
          this.orderList = res.userOrderList;
          console.log(this.orderList);
        });
    },
    //订单详情
    toOrderDetail(item) {
      // // 存vuex
      // this.$u.vuex("vuex_checkOrderInfo", {
      //   orderInfo: item,
      //   PriceMap: PriceMap,
      //   KuaidiMap: KuaidiMap,
      //   PMap: PMap,
      // });
      this.$u.route({
        url: "pages/order/components/orderDetail",
        params: {
          orderInfoId: item.orderInfoId,
        },
      });
    },
    // 选择订单状态
    changeOrderKind(e) {
      this.current = e;
      this.orderList = [];

      this.$u.api
        .getAllOrderListApi({ boxStatus: this.status[this.current] })
        .then((res) => {
          res.userOrderList.map((v) => {
            v.orderAddress = v.address.split("/");
            v.trueAddress =
              v.orderAddress[0] +
              "/" +
              v.orderAddress[1] +
              "/" +
              v.orderAddress[2] +
              "/" +
              v.orderAddress[3];
            v.kuaidiInfo = KuaidiMap.get(v.kuaidiId) + "* 1";
            v.price = PMap.get(v.boxPriceId);
          });
          this.orderList = res.userOrderList;
          console.log(this.orderList);
        });
    },
    toLogin() {
      this.$u.route({
        url: "pages/login/login",
      });
    },
  },
  //请求数据
  created() {},
};
</script>

<style scoped lang ='less' >
.order {
  width: 100v;
  min-height: 100vh;
  background-color: #eff5f7;
  padding: 10px;
  .order-card {
    background-color: #ffffff;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 7px;
    box-shadow: 1px 2px 5px 2px #ebeef5;

    .order-info-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 62.5px;
      border-bottom: 1px solid rgb(248 248 248);
      .order-info-title {
        & > view:nth-child(1) {
          color: #5a5b5c;
          font-size: 16px;
        }
        & > view:nth-child(2) {
          color: #919293;
          font-size: 13px;
          margin-top: 5px;
          background-color: #ffffff;
        }
      }
    }
    .order-info-content {
      padding: 10px 0;
      & > view:nth-child(1) {
        color: #5a5b5c;
        font-size: 14px;
      }
      & > view:nth-child(2) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        .time {
          color: #919293;
          font-size: 12px;
        }
        .price {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          & > view:nth-child(2) {
            color: #5a5b5c;
            font-size: 18px;
          }
        }
      }
    }
  }
}
.no-login {
  margin-top: 300px;
  text-align: center;
  color: #97af13;
}
</style>
